<template>
	<view :class="[small?'small-item':'','buy-item','flex-center-column']" @click="itemClick">
		<view class="buy-item-icon">
			<slot></slot>
		</view>
		<view class="buy-item-label flex-center-column">
			<text class="title">{{title}}</text>
			<text class="sub-title">{{subTitle}}</text>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		title:String,
		subTitle:String,
		small:{
			type:Boolean,
			default:false
		}
	})
	
	// 可以直接模版中直接发射事件，也可以不做任何事件的定义，在外部使用原生事件
	const emit = defineEmits(['click'])
	function itemClick(){
		emit('click','tet','index2')
		// emit('click','param')
	}
</script>

<style lang="less">
	@iconSize:120rpx;
	@smallIconSize:90rpx;
	
	// common class
	.flex-center-column {
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.buy-item {
		.buy-item-icon {
			::v-deep image {
				width:@iconSize;
				height:@iconSize;
			}
		}
		.buy-item-label {
			.title {
				font-weight: bold;
			}
			.sub-title {
				font-size:15rpx;
				color:gray;
			}

		}
	}
	.small-item {
		.buy-item-icon {
			::v-deep image {
				width:@smallIconSize;
				height:@smallIconSize;
			}
		}
		.title {
			font-size:25rpx;
		}
		
		
	}
</style>